<template>
  <div class="e-empty" :class="{ centered: centered }" :style="{ height: height + 'px' }">
    <e-icon type="No_Data" :default-color="true" :font-size="size + 'px'"></e-icon>
    <span class="description"><slot name="description" /></span>
  </div>
</template>

<script setup>
import EIcon from '@/components/EIcon.vue'
defineProps({
  centered: {
    type: Boolean,
    default: false
  },
  size: {
    type: Number,
    default: 264
  },
  height: {
    type: Number,
    default: 400
  }
})
</script>

<style lang="less" scoped>
.e-empty {
  &.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .description {
    color: @text-gray;
  }
}
</style>
